import React, {Component} from "react";
import {Link} from "react-router";
import {login} from "../utils/native_app";

const HOME_DEFAULT = "http://oeb6w1s1c.bkt.clouddn.com/170510135239984280863124.png";
const SHOPPING_CART_DEFAULT = "http://oeb6w1s1c.bkt.clouddn.com/170510135332483252598645.png";
const MINE_DEFAULT = "http://oeb6w1s1c.bkt.clouddn.com/170510135312464121313027.png";
const HOME_CLICKED = "http://oeb6w1s1c.bkt.clouddn.com/170510143621933868894043.png";
const SHOPPING_CART_CLICKED = "http://oeb6w1s1c.bkt.clouddn.com/170510143657746805866279.png";
const MINE_CLICKED = "http://oeb6w1s1c.bkt.clouddn.com/170510143641819605492309.png";
const CLASS_NAME_DEFAULT = "mall-menu-shoppingCart-text";
const CLASS_NAME_CLICKED = "mall-menu-shoppingCart-text-clicked";
class MallMenu extends Component {

    constructor(props) {
        super(props);
        let clickIndex = this.props.clickIndex == undefined ? 2 : this.props.clickIndex;
        this.state = {
            clickIndex: clickIndex,
            shoppingCartCount: props.shoppingCartCount
        };
    }

    componentWillUpdate(nextProps) {
        if (nextProps.shoppingCartCount != this.state.shoppingCartCount) {
            this.setState({
                shoppingCartCount: nextProps.shoppingCartCount
            });
        }
    }

    checkUser() {
        login("/#/mall/mine");
    }

    render() {
        console.log("_changeImg");
        return (
            <div className="mall-menu">
                <ul>
                    <li className="mall-menu-shoppingCart">
                        <Link to="mall/index" query={{categoryId: 0}}>
                            <img src={this.state.clickIndex == "0" ? HOME_CLICKED : HOME_DEFAULT}/>
                            <p className={this.state.clickIndex == "0" ? CLASS_NAME_CLICKED : CLASS_NAME_DEFAULT}>首页</p>
                        </Link>
                    </li>
                    <li className="mall-menu-shoppingCart">
                        <Link to="mall/shoppingCart">
                            <img name="img2"
                                 src={this.state.clickIndex == "1" ? SHOPPING_CART_CLICKED : SHOPPING_CART_DEFAULT}/>
                            <p className={this.state.clickIndex == "1" ? CLASS_NAME_CLICKED : CLASS_NAME_DEFAULT}>
                                购物车</p>
                        </Link>
                    </li>
                    {this.shoppingCartCount()}
                    <li className="mall-menu-shoppingCart">
                        <Link onClick={this.checkUser.bind(this)}>
                            <img src={this.state.clickIndex == "2" ? MINE_CLICKED : MINE_DEFAULT}/>
                            <p className={this.state.clickIndex == "2" ? CLASS_NAME_CLICKED : CLASS_NAME_DEFAULT}>我</p>
                        </Link>
                    </li>
                </ul>
            </div>
        )
    }

    shoppingCartCount() {
        if (this.state.shoppingCartCount > 0) {
            return (
                <i className="shopping-cart-count">{this.state.shoppingCartCount}</i>
            )
        }
    }
}

export default MallMenu